<template>
  <div>

    <el-dialog
      :visible.sync="openTwo"
      width="30%"
      center>
      <el-image :src="this.srcList"></el-image>
    </el-dialog>

    <el-dialog
      :visible.sync="openOne"
      width="30%"
      center>
      <el-image :src="this.srcListTwo"></el-image>
    </el-dialog>

    <el-tabs type="border-card">
      <el-tab-pane label="第一期凭证审核">
        <el-card>
          <el-table border v-loading="loading" style="width: 100%" :data="infoList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="支付金额" width="100" align="center" prop="instalmentPice" />
            <el-table-column label="用户手机号" width="100" align="center" prop="loginName" />
            <el-table-column label="施工队名称" width="100" align="center" prop="constructionName" />
            <el-table-column label="店铺名称" width="100" align="center" prop="shopsName" />
            <el-table-column label="第一次支付金额" width="100" align="center" prop="firstPayment" />
            <el-table-column label="第二次支付金额" width="100" align="center" prop="lastPayment" />
            <el-table-column label="第一次拨款" width="100" align="center" prop="oneMoney" />
            <el-table-column label="第二次拨款" width="100" align="center" prop="twoMoney" />
            <el-table-column label="第三次拨款" width="100" align="center" prop="threeMoney" />
            <el-table-column label="第四次拨款" width="100" align="center" prop="fiveMoney" />
            <el-table-column label="第五次拨款" width="100" align="center" prop="fourMoney" />
            <el-table-column label="第一期上传凭证" width="200" align="center" >
              <template slot-scope="scope" >
                <div @click="aaa(scope.row)">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.firstList"
                  >
                </el-image>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="第二期上传凭证" width="200" align="center" >
              <template slot-scope="scope">
                <div @click="bbb(scope.row)">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.lastList">
                </el-image>
                </div>
              </template>
            </el-table-column>

            <el-table-column width="300">
              <template slot-scope="scope">
                <el-steps :active="scope.row.voucherStatus+1" finish-status="success">
                  <el-step title="未审核"></el-step>
                  <el-step title="第一期凭证"></el-step>
                  <el-step title="第二期凭证"></el-step>
                </el-steps>
                <el-button style="margin-top: 12px;" @click="next(scope.row)">审核</el-button>
              </template>
            </el-table-column>

            <el-table-column label="支付状态" align="center" prop="zhuangtai" >
              <template slot-scope="scope">
                <el-tag
                  disable-transitions>{{scope.row.zhuangtai =='1' ? '已支付' : '正在支付'}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="最后审核时间" width="150" align="center" prop="modifiedTime" >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="第二期凭证审核">
        <voucherTow></voucherTow>
      </el-tab-pane>
      <el-tab-pane label="审核完毕">
        <endAudit></endAudit>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
  import {payableInstalmentList , editVoucherStatus} from "@/api/super/checkVoucher";

  export default {
        name: "checkVoucher",
    components:{
      voucherTow:()=> import('@/views/super/checkVoucher/voucherTow.vue'),
      endAudit:()=> import('@/views/super/checkVoucher/endAudit.vue')
    },
    data() {
      return {
        srcList:['',],
        srcListTwo:['',],
        valuesu: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        showSearch: true,
        // 总条数
        total: 0,
        // 施工队分期支付信息列表
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openTwo:false,
        openOne:false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          instalmentId: null,   //施工队分期支付id
          constructionId: null, //施工队ID
          customerId: null,     //用户ID
          firstList: null,      //第一期上传凭证
          lastList: null,       //第二期上传凭证
          instalmentPice: null, //价格
          zhuangtai: null,      //支付状态
          voucherStatus: null,  //凭证审核状态
          modifiedTime: null,   //最后修改时间
        },
        disabled: false,
        active: 0,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      aaa(row){
        this.openTwo = true;
        this.srcList = row.firstList
      },

      bbb(row){
        this.openOne = true;
        this.srcListTwo = row.lastList
      },

      next(row){
        this.$confirm(
          "确定要审核通过嘛？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(function () {
            row.voucherStatus += 1;
            return editVoucherStatus(row.instalmentId , row.voucherStatus);
        }).then(() => {
          this.msgSuccess("审核成功！");
          this.getList();
        });
      },

      /** 查询施工队分期支付列表 */
      getList() {
        this.loading = true;
        payableInstalmentList(this.queryParams).then(res => {
          console.log(res.msg);
          this.infoList = res.rows;
          this.total = res.total;
          this.loading = false;
          console.log(this.infoList);
        });
      },
    }
  }
</script>

<style scoped>

</style>
